<template>
<div id="add-params-attr">
    <div v-if="!cid">'cid' 不存在 </div>
    <div v-else>
        <h3 class="params-attr-title">{{title}} - {{cid}}</h3>
        <form class="form-params-attr">
            <my-input
                :title="lableTitle"
                name="inp-params-attr"
                v-model="pOraValue"
                autofocus
                required
            ></my-input>
        </form>
        <div class="footer-params-attr">
            <my-button type="back" link :to="{name: 'classifyParams'}">返回</my-button>
            <my-button 
                type="save" 
                :disabled='!pOraValue' 
                @click.native="handleClickSaveOrAttr"
            >保存</my-button>
        </div>
    </div>
</div>
</template>

<script>
import { 
    AddCateParamsOrAttr, 
    editCateParamsOrAttr
} from '../../config/data'
export default {
    name: 'addParamsOrAttr',
    props: ['cid', 'sel', 'path', 'crumb', 'edit', 'aid', 'poaName'],
    data() {
        return {
            pOraValue: ''
        }
    },
    created() {
        if(!this.cid) {
            this.$router.push({name: 'classifyParams'})
        }
        if(this.edit) {
            this.pOraValue = this.poaName
        }
    },
    methods: {
        async handleClickSaveOrAttr() {
            let result = ''
            let infoObj = {
                cid: this.cid,
                name: this.pOraValue,
                sel: this.sel
            }
            if(this.edit) {
                result = await editCateParamsOrAttr({
                    ...infoObj,
                    aid: this.aid
                })
            } else {
                result = await AddCateParamsOrAttr(infoObj)
            }
            if(!result.fsBool) return;
            this.$router.push({name: 'classifyParams'})
        }
    },
    computed: {
        title() {
            return this.crumb && this.crumb.split("_")[1];
        },
        lableTitle() {
            return this.sel === 'many' ? '动态参数' : '静态属性';
        }
    },
}
</script>

<style scoped>
#add-params-attr {
    height: 100%;
}
.params-attr-title {
    height: 50px;
    line-height: 50px;
}
.form-params-attr {
    display: flex;
    justify-content: center;
}
.footer-params-attr {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}
.footer-params-attr :first-child {
    margin-right: 12px;
}
</style>